<template>
	<div class="app-container" style="position: relative; height: calc(100vh - 117px);">
		<div class="container">

			<el-tabs v-model="status" type="card" @tab-click="handleOrder">
				<el-tab-pane name="0">
					<span slot="label"><i class="el-icon-s-order"></i> 全部订单</span>
				</el-tab-pane>
				<el-tab-pane name="12">
					<span slot="label"><i class="el-icon-bank-card"></i> 待付款</span>
				</el-tab-pane>
				<el-tab-pane name="2">
					<span slot="label"><i class="el-icon-refrigerator"></i> 待发货</span>
				</el-tab-pane>
				<el-tab-pane name="3">
					<span slot="label"><i class="el-icon-truck"></i> 待收货</span>
				</el-tab-pane>
				<el-tab-pane name="4">
					<span slot="label"><i class="el-icon-document"></i> 待评价</span>
				</el-tab-pane>
				<el-tab-pane name="5">
					<span slot="label"><i class="el-icon-circle-check"></i> 交易完成</span>
				</el-tab-pane>
				<el-tab-pane name="19">
					<span slot="label"><i class="el-icon-back"></i> 申请售后</span>
				</el-tab-pane>
				<el-tab-pane name="14">
					<span slot="label"><i class="el-icon-finished"></i> 已退款</span>
				</el-tab-pane>
				<el-tab-pane name="15">
					<span slot="label"><i class="el-icon-circle-close"></i> 已关闭</span>
				</el-tab-pane>
			</el-tabs>
			<!--工具栏-->
			<el-card class="filter-container" shadow="never">
				<div>
					<i class="el-icon-search"></i>
					<span>筛选搜索</span>
					<el-button style="float:right" type="primary" @click="handleSearchList()" size="small">
						查询搜索
					</el-button>
					<el-button style="float:right;margin-right: 15px" @click="handleResetSearch()" size="small">
						重置
					</el-button>
				</div>
				<div style="margin-top: 15px">
					<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
						<el-form-item label="输入搜索：">
							<el-input v-model="listQuery.id" class="input-width" placeholder="编号"></el-input>
						</el-form-item>
						<el-form-item label="订单分类：">
							<el-select v-model="listQuery.isQuick" class="input-width" placeholder="全部" clearable>
								<el-option v-for="item in orderTypeOptions" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>


						<el-form-item label="下单时间：">
							<el-date-picker class="input-width" v-model="listQuery.createTime" value-format="yyyy-MM-dd" type="date"
							 placeholder="请选择时间">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="收货信息  ：">
							<el-input v-model="listQuery.receiverPhone" class="input-width" placeholder="收货人电话"></el-input>
						</el-form-item>

						<el-form-item label="订单来源：">
							<el-select v-model="listQuery.sourceType" class="input-width" placeholder="全部" clearable>
								<el-option v-for="item in sourceTypeOptions" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-form>
				</div>
			</el-card>

			<!--订单数据统计-->
			<div class="order-caculate">
				<a class="caculate-title">订单数 : <span class="caculate-num">{{caculateInfo.orderCount}}</span></a>

				<a class="caculate-title">订单金额 : <span class="caculate-num">{{caculateInfo.orderPay}}</span></a>
				<a class="caculate-title">客户数 : <span class="caculate-num">{{caculateInfo.memberCount}}</span></a>
			</div>

			<el-card class="operate-container" shadow="never">
				<!-- <i class="el-icon-tickets"></i>
				<span>数据列表</span> -->
				
				<el-button type="primary" size="small">
					<span @click="updateOrderType(3)">砍价订单</span>
				</el-button>
				
				<el-button type="primary" size="small">
					<span @click="updateOrderType(2)">快抢订单</span>
				</el-button>
				<el-button type="primary" size="small">
					<span @click="updateOrderType(1)">super订单</span>
				</el-button>
			</el-card>
			<div class="table-container">
				<el-table ref="orderTable" :data="list" style="width: 100%;" @selection-change="handleSelectionChange" v-loading="listLoading"
				 border>
					<el-table-column type="selection" width="60" align="center"></el-table-column>
					<el-table-column label="编号" width="80" align="center">
						<template slot-scope="scope">{{scope.row.id}}</template>
					</el-table-column>
					<el-table-column label="订单编号" width="180" align="center">
						<template slot-scope="scope">{{scope.row.orderSn}}</template>
					</el-table-column>
					<el-table-column label="商品" width="180" align="center">
						<template slot-scope="scope">{{scope.row.goodsName}}</template>
					</el-table-column>
					<el-table-column label="下单时间" width="180" align="center">
						<template slot-scope="scope">{{scope.row.createTime | formatCreateTime}}</template>
					</el-table-column>

					<el-table-column label="用户账号" align="center">
						<template slot-scope="scope">{{scope.row.memberUsername}}</template>
					</el-table-column>
					<el-table-column label="订单金额" width="120" align="center">
						<template slot-scope="scope">￥{{scope.row.totalAmount}}</template>
					</el-table-column>
					<el-table-column label="支付金额" width="120" align="center">
						<template slot-scope="scope">￥{{scope.row.payAmount}}</template>
					</el-table-column>
					<el-table-column label="支付方式" width="120" align="center">
						<template slot-scope="scope">{{scope.row.payType | formatPayType}}</template>
					</el-table-column>

					<el-table-column label="订单类型" width="120" align="center">
						<template slot-scope="scope">{{scope.row.isQuick | formatOrderType}}</template>
					</el-table-column>


					<el-table-column label="订单状态" width="120" align="center">
						<template slot-scope="scope">{{scope.row.status | formatStatus}}</template>
					</el-table-column>
					<el-table-column label="操作" align="center">
						<template slot-scope="scope">
							<el-button size="mini" @click="handleViewOrder(scope.$index, scope.row)">查看订单</el-button>
							<el-button v-if="scope.row.status ==13 || scope.row.status ==14 || scope.row.status ==19" size="mini" @click="handleApplyViewOrder(scope.$index, scope.row)">售后列表</el-button>

							<el-button v-if="scope.row.status ==12 && isAdmin" size="mini" @click="handlePayOrder(scope.$index, scope.row)">付款</el-button>
							<el-button size="mini" @click="handleCloseOrder(scope.$index, scope.row)" v-show="scope.row.status===12">关闭订单</el-button>
							<el-button size="mini" @click="handleDeliveryOrder(scope.$index, scope.row)" v-show="scope.row.status===2">订单发货</el-button>
							<el-button size="mini" @click="handleViewLogistics(scope.$index, scope.row)" v-show="scope.row.status>0 && scope.row.status<9">订单跟踪</el-button>
							<el-button size="mini" type="danger" @click="handleDeleteOrder(scope.$index, scope.row)" v-show="scope.row.status===15">删除订单</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="batch-operate-container">
				<el-checkbox v-model="printChecked" @change="batchSelection" style="margin-right: 20px;"></el-checkbox>
				<el-select v-model="batchHandle" @change="handlePrintOption" clearable placeholder="批量操作" class="filter-item" style="width: 130px; margin-right: 8px;">
					<el-option v-for="item in handleOptions" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
				<el-select v-model="batchExport" @change="handleExportOption" clearable placeholder="批量导出" class="filter-item"
				 style="width: 130px">
					<el-option v-for="item in exportOptions" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</div>
			<div class="pagination-container">
				<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" layout="total, sizes,prev, pager, next,jumper"
				 :current-page.sync="listQuery.pageNum" :page-size="listQuery.pageSize" :page-sizes="[10,15,50]" :total="total">
				</el-pagination>
			</div>
		</div>
		<el-dialog title="关闭订单" :visible.sync="closeOrder.dialogVisible">
			<span style="vertical-align: top">操作备注：</span>
			<el-input style="width: 80%" type="textarea" :rows="5" placeholder="请输入内容" v-model="closeOrder.content">
			</el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="closeOrder.dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleCloseOrderConfirm">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="付款" :visible.sync="payOrder.dialogVisible">
			<span style="vertical-align: top">操作备注：</span>
			<el-input style="width: 80%" type="textarea" :rows="5" placeholder="请输入内容" v-model="payOrder.content">
			</el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="payOrder.dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="handlePayOrderConfirm">确 定</el-button>
			</span>
		</el-dialog>
		<logistics-dialog v-model="logisticsDialogVisible"></logistics-dialog>
	</div>
</template>

<script>
	import checkPermission from '@/utils/permission'
	import {
		formatTime
	} from '@/utils/index'
	import {
		fetchList,
		closeOrder,
		deleteOrderById,
		orderData,
		updateOrderNote
	} from '@/api/order'
	import {
		formatDate
	} from '@/utils/date';
	import LogisticsDialog from '@/views/oms/order/components/logisticsDialog';
	import {
		getToken,
		get
	} from '@/utils/auth'
	const defaultListQuery = {
		pageNum: 1,
		pageSize: 10,
		orderSn: null,
		receiverKeyword: null,
		status: null,
		orderType: null,
		sourceType: null,
		createTime: null,
		isQuick:null
	};

	export default {
		name: "orderList",
		components: {
			LogisticsDialog
		},
		data() {
			return {
				delLoading: false,
				status: '-9',
				orderType: '0',
				createTime: '',
				checkList: [],
				printChecked: false,
				batchHandle: '',
				batchExport: '',
				listContent: [],
				listQuery: Object.assign({}, defaultListQuery),
				listLoading: true,
				isAdmin: false,
				list: null,
				total: null,
				operateType: null,
				multipleSelection: [],
				closeOrder: {
					dialogVisible: false,
					content: null,
					orderIds: []
				},
				payOrder: {
					dialogVisible: false,
					content: null,
					orderIds: []
				},

				statusOptions: [{
						label: '待付款',
						value: 12
					},
					{
						label: '待发货',
						value: 2
					},
					{
						label: '已发货',
						value: 3
					},
					{
						label: '已完成',
						value: 5
					},
					{
						label: '申请退款',
						value: 13
					},
					{
						label: '已退款',
						value: 14
					},
					{
						label: '已关闭',
						value: 15
					}
				],
				orderTypeOptions: [{
						label: '砍价订单',
						value: 3
					},
					{
						label: '快抢订单',
						value: 2
					}, {
						value: 1,
						label: "super订单"
					}
				],
				sourceTypeOptions: [{
						label: '小程序订单',
						value: 1
					},
					{
						label: 'APP订单',
						value: 4
					},
					{
						label: 'h5订单',
						value: 2
					},
					{
						label: 'pc订单',
						value: 3
					}
				],
				operateOptions: [{
						label: "批量发货",
						value: 1
					},
					{
						label: "关闭订单",
						value: 2
					},
					{
						label: "删除订单",
						value: 3
					}
				],
				logisticsDialogVisible: false,

				handleOptions: [{
						value: '',
						label: '批量操作'
					},
					{
						value: '0',
						label: '批量打印'
					},
				],
				exportOptions: [{
						value: '',
						label: '批量导出'
					},
					{
						value: '0',
						label: '导出全部'
					},
					{
						value: '1',
						label: '导出选中'
					},
				],
				caculateInfo: {
					orderCount: 0,
					orderPay: 0,
					memberCount: 0,

				},
			}
		},
		created() {
			this.$nextTick(() => {
				this.getList();
				this.orderDatas(0);
				this.isAdmin = get('storeId') == 0
			})
		},
		filters: {
			formatCreateTime(time) {
				let date = new Date(time);
				return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
			},
			formatPayType(value) {
				if (value === 2) {
					return '支付宝';
				} else if (value === 1) {
					return '微信小程序';
				} else if (value === 3) {
					return '余额支付';
				} else if (value === 5) {
					return '积分兑换';
				}
			},
			formatSourceType(value) {
				if (value === 1) {
					return '小程序';
				} else if (value === 2) {
					return 'h5订单';
				} else if (value === 3) {
					return 'PC订单';
				} else if (value === 4) {
					return 'android订单';
				} else if (value === 5) {
					return 'ios订单';
				}
			},
			formatOrderType(value) {
				if (value === 1) {
					return 'super订单';
				} else if (value === 3) {
					return '砍价订单';
				} else if (value === 2) {
					return '快抢订单';
				} 
			},
			formatStatus(value) {
				if (value === 12) {
					return '待付款';
				}
				if (value === 1) {
					return '支付成功，没有回掉';
				} else if (value === 2) {
					return '待发货';
				} else if (value === 3) {
					return '待收货';
				} else if (value === 4) {
					return '待评价';
				} else if (value === 5) {
					return '已完成';
				} else if (value === 19) {
					return '申请售后';
				} else if (value === 20) {
					return ' 售后已完成';
				} else if (value === 8) {
					return '待分享';
				} else if (value === 13) {
					return '申请退款';
				} else if (value === 14) {
					return '已退款';
				} else if (value === 15) {
					return '已关闭';
				} else if (value === 16) {
					return '无效订单';
				} else if (value === 17) {
					return '已删除';
				} else if (value === 18) {
					return '拼团下单成功';
				}
			},
		},
		methods: {
			// 切换订单类型
			updateOrderType(isQuick){
				this.listQuery.isQuick = isQuick;
				this.getList();
			},
			formatTime,
			checkPermission,
			handleOrder(tab, event) {
				console.log(tab)
				this.listQuery.status = tab.name;
				this.getList();
				this.orderDatas(tab.name);
			},
			handleResetSearch() {
				this.listQuery = Object.assign({}, defaultListQuery);
			},
			handleSearchList() {
				this.listQuery.pageNum = 1;
				this.getList();
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			handleViewOrder(index, row) {
				this.$router.push({
					path: '/oms/orderDetail',
					query: {
						id: row.id
					}
				})
			},

			handleApplyViewOrder(index, row) {
				this.$router.push({
					path: '/oms/returnApply',
					query: {
						orderId: row.id
					}
				})
			},
			handleCloseOrder(index, row) {
				this.closeOrder.dialogVisible = true;
				this.closeOrder.orderIds = [row.id];
			},
			handlePayOrder(index, row) {
				this.payOrder.dialogVisible = true;
				this.payOrder.orderIds = [row.id];
			},

			handleDeliveryOrder(index, row) {
				let listItem = this.covertOrder(row);
				this.$router.push({
					path: '/oms/deliverOrderList',
					query: {
						list: [listItem]
					}
				})
			},
			handleViewLogistics(index, row) {
				this.logisticsDialogVisible = true;
			},
			handleDeleteOrder(index, row) {
				console.log('handleDeleteOrder=' + row.id);
				this.$confirm('是否要删除订单', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					deleteOrderById(row.id).
					then(response => {
						this.$message({
							message: '删除成功',
							type: 'success',
							duration: 1000
						});
						this.getList();
					});

				});
			},
			handleBatchOperate() {
				if (this.multipleSelection == null || this.multipleSelection.length < 1) {
					this.$message({
						message: '请选择要操作的订单',
						type: 'warning',
						duration: 1000
					});
					return;
				}
				if (this.operateType === 1) {
					//批量发货
					let list = [];
					for (let i = 0; i < this.multipleSelection.length; i++) {
						if (this.multipleSelection[i].status === 1) {
							list.push(this.covertOrder(this.multipleSelection[i]));
						}
					}
					if (list.length === 0) {
						this.$message({
							message: '选中订单中没有可以发货的订单',
							type: 'warning',
							duration: 1000
						});
						return;
					}
					this.$router.push({
						path: '/oms/deliverOrderList',
						query: {
							list: list
						}
					})
				} else if (this.operateType === 2) {
					//关闭订单
					this.closeOrder.orderIds = [];
					for (let i = 0; i < this.multipleSelection.length; i++) {
						this.closeOrder.orderIds.push(this.multipleSelection[i].id);
					}
					this.closeOrder.dialogVisible = true;
				} else if (this.operateType === 3) {
					//删除订单
					let ids = [];
					for (let i = 0; i < this.multipleSelection.length; i++) {
						ids.push(this.multipleSelection[i].id);
					}
					this.deleteOrder1(ids);
				}
			},
			handleSizeChange(val) {
				this.listQuery.pageNum = 1;
				this.listQuery.pageSize = val;
				this.getList();
			},
			handleCurrentChange(val) {
				this.listQuery.pageNum = val;
				this.getList();
			},
			// 付款
			handlePayOrderConfirm() {
				if (this.payOrder.content == null || this.payOrder.content === '') {
					this.$message({
						message: '操作备注不能为空',
						type: 'warning',
						duration: 1000
					});
					return;
				}
				let params = new URLSearchParams();
				params.append('id', this.payOrder.orderIds);
				params.append('note', this.payOrder.content);
				params.append('status', 2);
				updateOrderNote(params).then(response => {
					this.payOrder.orderIds = [];
					this.payOrder.dialogVisible = false;
					this.getList();
					this.$message({
						message: '修改成功',
						type: 'success',
						duration: 1000
					});
				});
			},

			//关闭订单
			handleCloseOrderConfirm() {
				if (this.closeOrder.content == null || this.closeOrder.content === '') {
					this.$message({
						message: '操作备注不能为空',
						type: 'warning',
						duration: 1000
					});
					return;
				}
				let params = new URLSearchParams();
				params.append('ids', this.closeOrder.orderIds);
				params.append('note', this.closeOrder.content);
				closeOrder(params).then(response => {
					this.closeOrder.orderIds = [];
					this.closeOrder.dialogVisible = false;
					this.getList();
					this.$message({
						message: '修改成功',
						type: 'success',
						duration: 1000
					});
				});
			},
			getList() {
				this.listLoading = true;
				fetchList(this.listQuery).then(response => {
					this.listLoading = false;
					this.list = response.data.records;
					this.total = response.data.total;
				});
			},
			orderDatas(status) {
				orderData({
					status: status
				}).then(response => {
					this.caculateInfo = response.data;
				});
			},

			deleteOrder1(ids) {
				this.$confirm('是否要进行该删除操作?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let params = new URLSearchParams();
					params.append("ids", ids);
					deleteOrder1(params).then(response => {
						this.$message({
							message: '删除成功！',
							type: 'success',
							duration: 1000
						});
						this.getList();
					});
				})
			},
			covertOrder(order) {
				let address = order.receiverProvince + order.receiverCity + order.receiverRegion + order.receiverDetailAddress;
				let listItem = {
					orderId: order.id,
					orderSn: order.orderSn,
					receiverName: order.receiverName,
					receiverPhone: order.receiverPhone,
					receiverPostCode: order.receiverPostCode,
					address: address,
					deliveryCompany: null,
					deliverySn: null
				};
				return listItem;
			},
			beforeInit() {
				this.url = 'api/yxStoreOrder'
				const sort = 'id,desc'
				this.params = {
					page: this.page,
					size: this.size,
					sort: sort,
					orderStatus: this.status,
					orderType: this.orderType,
					addTime: this.createTime,
					listContent: this.listContent
				}
				const query = this.query
				const type = query.type
				return true
			},
			clearCaculateInfo() {
				this.caculateInfo = {
					orderCount: 0,
					orderPay: 0,
					memberCount: 0,
				};
			},

			batchSelection(val) {
				let rows = this.data;
				if (val) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			handlePrintOption(val) {
				switch (val) {
					case '0':
						this.getPrintList();
						this.batchHandle = '';
						break;
					default:
						break;
				}
			},
			handleExportOption(val) {
				let list = this.checkList;
				this.page = 0;
				this.size = 10000;
				switch (val) {
					case "0":
						this.listContent = "";
						this.beforeInit();
						this.downloadMethod();
						break;
					case "1":
						if (list.length == 0) {
							this.$message({
								message: '请选择订单',
								type: 'warning'
							});
						} else {
							this.listContent = [];
							list.forEach((item) => {
								this.listContent.push(item.orderId);
							})
							this.listContent = JSON.stringify(this.listContent);
							this.beforeInit();
							this.downloadMethod();
						}
						break;
					default:
						break;
				}
				this.batchExport = "";
			},
			downloadMethod() {
				this.beforeInit()
				this.downloadLoading = true
				download(process.env.BASE_API + '/download', this.params).then(result => {
					this.downloadFile(result, this.title + '数据', 'xlsx')
					this.downloadLoading = false
				}).catch(() => {
					this.downloadLoading = false
				})
			},
			// 下载文件
			downloadFile(obj, name, suffix) {
				const url = window.URL.createObjectURL(new Blob([obj]))
				const link = document.createElement('a')
				link.style.display = 'none'
				link.href = url
				const fileName = parseTime(new Date()) + '-' + name + '.' + suffix
				link.setAttribute('download', fileName)
				document.body.appendChild(link)
				link.click()
				document.body.removeChild(link)
			},
			getPrintList() {
				let list = this.checkList;
				if (list.length == 0) {
					this.$message({
						message: '请选择订单',
						type: 'warning'
					});
				} else {
					const _this = this.$refs.form5;
					_this.dialog = true
				}
			},
			checkboxT(row, rowIndex) {
				return row.id !== 1
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		height: calc(100% - 80px);
		position: absolute;
		overflow: auto;
		width: calc(100% - 20px);

		.order-caculate {
			font-size: 14px;
			color: #909399;
			border-top: 1px solid #f0f0f0;
			padding: 20px 10px;

			.caculate-title {
				display: inline-block;
				margin-right: 50px;
			}

			.caculate-num {
				font-size: 20px;
				color: #ff4949;
			}
		}

		.el-table th {
			background-color: #fafafa;
		}
	}

	.footer-contains {
		position: absolute;
		display: -ms-flexbox;
		display: flex;
		background-color: #f6f6f6;
		bottom: 0;
		flex-align: center;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		z-index: 999;
		padding: 0 20px 0 13px;
	}

	/*打印单样式编辑*/
	.order-list {
		/*  height: 297mm;*/
		margin: 0 auto;
		width: 210mm;

		.order-title {
			height: 16mm;
			line-height: 16mm;
			font-size: 8mm;
			font-weight: bolder;
			text-align: center;
		}

		.order-info {
			span {
				display: inline-block;
				padding: 0 0 10px 0;
				font-size: 3mm;
			}

			span.info {
				width: 60mm;
			}
		}

		.el-table--small th,
		.el-table--small td {
			padding: 4px 0;
		}
	}
</style>
